<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import ScrollBar from './components/ScrollBar.vue'

// 导入菜单组件
import videoMonitor from './VideoMonitor.vue'
import taskManage from './TaskManage.vue'
import environmentMonitor from './EnvironmentMonitor.vue'
import exceptionLog from './ExceptionLog.vue'
// import temperatureRecord from "./TemperatureRecord.vue";
import licenseDiscern from './LicenseDiscern.vue'
import otherSetting from './OtherSetting.vue'
// import MapSetting from "./MapSetting.vue";

// 导入菜单组件图标
import dir_video from '@/assets/images/inspection/dir_video.png'
import dir_task from '@/assets/images/inspection/dir_task.png'
import dir_data from '@/assets/images/inspection/dir_data.png'
import dir_log from '@/assets/images/inspection/dir_log.png'
// import dir_tp from "@/assets/images/inspection/dir_tp.png";
import dir_lp from '@/assets/images/inspection/dir_lp.png'
import dir_set from '@/assets/images/inspection/dir_set.png'
import { robotTypes } from '../utils/index'

// 返回机器人列表
const router = useRouter()
function goBack() {
  router.push({ name: 'control-home' })
}

const route = useRoute()
// 菜单列表
const menuList = computed(() => {
  const { rType } = route.query
  if (rType === robotTypes.OUTSIDE) {
    return [
      { id: 1, name: '视频监控', img: dir_video, component: videoMonitor },
      { id: 2, name: '任务管理', img: dir_task, component: taskManage },
      // { id: 7, name: "地图设置", img: dir_set, component: MapSetting },
      { id: 3, name: '环境监测', img: dir_data, component: environmentMonitor },
      { id: 4, name: '异常日志', img: dir_log, component: exceptionLog },
      // { id: 5, name: "体温记录", img: dir_tp, component: temperatureRecord },
      { id: 6, name: '车牌识别', img: dir_lp, component: licenseDiscern },
      { id: 8, name: '其他设置', img: dir_set, component: otherSetting }
    ]
  } else if (rType === robotTypes.INSIDE) {
    return [
      { id: 1, name: '视频监控', img: dir_video, component: videoMonitor },
      { id: 2, name: '任务管理', img: dir_task, component: taskManage },
      { id: 3, name: '环境监测', img: dir_data, component: environmentMonitor },
      { id: 4, name: '异常日志', img: dir_log, component: exceptionLog }
    ]
  } else {
    return []
  }
})

// 激活菜单id
const activeMenuId = ref(2)
// 激活菜单组件
const activeMenuComponent = computed(() => {
  const currentMenu = menuList.value.find((menu) => menu.id === activeMenuId.value)
  if (currentMenu) {
    return currentMenu.component
  } else {
    return null
  }
})

/**
 * @description: 切换菜单
 * @param {*} id
 * @return {*}
 */
function switchMenu(id) {
  activeMenuId.value = id
}

/**
 * @description: 当前激活菜单
 * @param {*} id
 * @return {*}
 */
function isActiveMenu(id) {
  return activeMenuId.value === id
}

const isOutside = computed(() => {
  const { rType } = route.query
  return rType === robotTypes.OUTSIDE
})

function openVoiceIntercom() {
  window.open(
    'https://' + location.hostname + '/inspection/voice-intercom',
    '_blank',
    'height=500, width=300, top=200, left=300'
  )
}
</script>

<template>
  <div class="flex min-h-[calc(100vh-84px)]">
    <div class="min-w-[200px] min-h-[calc(100vh-84px)] bg-[#162331] text-white">
      <div
        class="w-full h-20 flex items-center justify-center cursor-pointer select-none"
        @click="goBack()"
      >
        <img src="@/assets/images/inspection/back.png" />
      </div>
      <div
        v-for="item in menuList"
        :key="item.id"
        :class="{
          'bg-gradient-to-b from-cyan-500 to-blue-500': isActiveMenu(item.id)
        }"
        class="w-full h-16 text-lg font-bold flex items-center justify-center cursor-pointer select-none"
        @click="switchMenu(item.id)"
      >
        <img class="h-5 w-5" :src="item.img" />
        <span class="ml-4">{{ item.name }}</span>
      </div>
      <div
        class="w-full h-16 text-lg font-bold flex items-center justify-center cursor-pointer select-none"
        @click="openVoiceIntercom"
      >
        <img class="h-5 w-5" :src="dir_video" />
        <span class="ml-4">语言对讲</span>
      </div>
    </div>
    <el-container class="bg-[#0D1A29] p-4 text-white max-h-[calc(100vh-84px)]">
      <el-header v-show="isOutside" class="p-0 mb-3">
        <ScrollBar></ScrollBar>
      </el-header>
      <el-main id="app-container" class="p-0 grow">
        <KeepAlive>
          <component :is="activeMenuComponent"></component>
        </KeepAlive>
      </el-main>
    </el-container>
  </div>
</template>
